<template>
  <div>
    <slot v-if="title">
      <p style="font-size: 16px; font-weight: 500">{{ title }}</p>
    </slot>
    <el-table :data="list" border>
      <el-table-column
        v-for="columnItem in columnList"
        :key="columnItem.prop"
        :label="columnItem.label"
        :prop="columnItem.prop"
        align="center"
        :width="columnItem.width"
        v-bind="columnItem"
      >
        <template slot-scope="{row}">
          <el-input v-if="columnItem.type === DISPLAY_TYPE.DISPLAY_TYPE_INPUT " />
          <el-input-number
            v-else-if="columnItem.type === DISPLAY_TYPE.DISPLAY_TYPE_NUMBER_INPUT "
            v-model="row[columnItem.prop]"
            controls-position="right"
            :min="1"
            :max="100"
          />
          <span v-else>{{ row[columnItem.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import DISPLAY_TYPE from './Constant'
export default {
  name: 'CommonEditList',
  props: {
    title: {
      type: String,
      default: ''
    },
    list: {
      type: Array,
      default: () => []
    },
    columnList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      DISPLAY_TYPE
    }
  }
}
</script>

<style scoped>

</style>
